<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../js/axios.min.js"></script>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  h1 {
    text-align: center;
  }

  div {
    width: 400px;
    height: 300px;
    background-color: rgba(100, 148, 237, 0.774);
    margin: 0 auto;
  }

  div input:nth-child(2) {
    margin-left: 115px;
    margin-top: 20px;
    display: block;
  }

  div input:nth-child(3) {
    margin-left: 115px;
    margin-top: 20px;
    display: block;
  }

  div input:nth-child(4) {
    margin-left: 115px;
    margin-top: 20px;
    display: block;
  }

  div input:nth-child(5) {
    margin-left: 115px;
    margin-top: 20px;
    display: block;
  }

  div input:nth-child(6) {
    margin-left: 175px;
    margin-top: 20px;
    display: block;
  }
</style>

<body>
  <div>
    <h1>后台修改系统</h1>
    <input type="text" name="" id="" placeholder="修改商品名称" />
    <input type="text" name="" id="" placeholder="修改商品价格" />
    <input type="text" name="" id="" placeholder="修改商品图片" />
    <input type="text" name="" id="" placeholder="修改商品描述" />
    <input type="button" name="" id="" value="修改" onclick="updateProduct()" />
  </div>


  <script>
    // 跳转了修改页面-- 需要在 输入框中显示 要修改的商品的信息
    //  ****** 在a标签跳转过程中 把 要修改的商品的id 传递到 修改页面
    //   update.html?id=商品的id
    // 修改页面 就可以获取id ，根据 商品id  调用 接口获取商品的详情--》输入框
    //   http://127.0.0.1:5500/day25/25-%E4%BB%A3%E7%A0%81/admin/update.html?id=643725
    // 修改页面测试的 ，通过商品列表 点击 跳转再测试
    //获取 当前页面 url 后面 ？id=xxx
    //   location.search ---> "?id=643725"
    console.log(location.search); //?id=643725
    //   let searchStr = location.search.slice(1);
    //   console.log(searchStr); //id=643725&aa=2&bb=2
    //   let key = "id";
    //   let value = null;
    //   let arr = searchStr.split("&");
    //   console.log(arr);
    //   arr.forEach((v) => {
    //     let tempArr = v.split("=");
    //     console.log(tempArr);
    //     if (tempArr[0] == key) {
    //       value = tempArr[1];
    //     }
    //   });
    //   console.log(value); //643725

    //   把搜索字符串 ？id=22&a=2&b=2 转为对象
    let searchObj = new URLSearchParams(location.search);
    console.log(searchObj);
    //获取 id 的值
    let pid = searchObj.get("id");
    console.log(pid);
    let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
    axios.get(detailProductAPI, {
      params: {
        id: pid
      }
    }).then((r) => {
      //r.data 服务器返回的数据
      let pObj = r.data.data;
      console.log(pObj);
      let ipts = document.querySelectorAll("input");
      ipts[0].value = pObj.pname;
      ipts[1].value = pObj.pprice;
      ipts[2].value = pObj.pimg;
      ipts[3].value = pObj.pdesc;
    });
    /* 
      根据商品 id 获取商品详情接口

     接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
    接口请求方式：get
    接口参数：
    id  商品的id
    使用方式
    获取id为1的商品的详情
    http://jx.xuzhixiang.top/ap/api/detail.php?id=1
    服务器返回json数据

      
      */

    // 修改接口 需要把 所有的数据都传给服务器
    //   接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-update.php
    //      接口请求方式：get
    //      接口参数：

    // pid（必选）商品的id
    // pname（必选）商品
    // pprice（必选）商品
    // pdesc（必选）商品
    // pimg（必选）商品
    // 使用方式

    async function updateProduct() {
      let ipts = document.querySelectorAll("input");
      let pname = ipts[0].value;
      let pprice = ipts[1].value;
      let pimg = ipts[2].value;
      let pdesc = ipts[3].value;
      //pid 全局变量
      let params = {
        pname,
        pprice,
        pimg,
        pdesc,
        pid
      };
      console.log(params);
      // 调用修改接口
      let updateProAPI =
        "http://jx.xuzhixiang.top/ap/api/goods/goods-update.php";
      let r = await axios.get(updateProAPI, {
        params
      });
      console.log(r.data);
      //  修改成功跳转页面
      location.href = "list.html";
    }
  </script>
</body>

</html>